Bootstrap img サイズ指定
Bootstrap を使用すると、レスポンシブな画像を簡単に作成できます。ここでは、Bootstrap における img 要素のサイズ指定について解説します。
クラスによるサイズ指定
Bootstrap は、画像のサイズを指定するためのユーティリティクラスを提供しています。これらのクラスを使用することで、簡単に画像の幅と高さを調整できます。
| クラス | 説明 |
|---|---|
.img-fluid |
画像を親要素の幅に合わせてレスポンシブに調整します。 |
.img-thumbnail |
画像にわずかな丸みを帯びた境界線を追加します。 |
.w-25, .w-50, .w-75, .w-100 |
画像の幅をそれぞれ 25%、50%、75%、100% に設定します。 |
.h-25, .h-50, .h-75, .h-100 |
画像の高さをそれぞれ 25%、50%、75%、100% に設定します。 |
例
<img src="..." class="img-fluid" alt="..."></img>
<img src="..." class="img-thumbnail" alt="..."></img>
<img src="..." class="w-50" alt="..."></img>
<img src="..." class="h-100" alt="..."></img>
カスタムサイズ指定
クラスによるサイズ指定以外にも、スタイル属性やインラインスタイルを使用して、画像のサイズを自由に指定することができます。
例
<img src="..." style="width: 200px; height: 150px;" alt="..."></img>
参考資料
Q&A
Q1: .img-fluid とは何ですか？
A1: .img-fluid は、画像を親要素の幅に合わせてレスポンシブに調整する Bootstrap のユーティリティクラスです。これにより、画像がコンテナからはみ出したり、レイアウトが崩れたりするのを防ぐことができます。
Q2: 画像に丸みを帯びた境界線を追加するにはどうすればよいですか？
A2: .img-thumbnail クラスを img 要素に追加することで、画像にわずかな丸みを帯びた境界線を追加できます。
Q3: 画像のサイズをpx単位で指定することはできますか？
A3: はい、スタイル属性やインラインスタイルを使用することで、画像のサイズをpx単位で指定することができます。例えば、style="width: 200px; height: 150px;" のように指定します。